<template>
    <div class="container">
        <div class="textarea markdown">
            <div class="title">
                <span>编辑区</span>
                <div class="btnBox">
                    <input type="button" id="submit" @click="submit" value="发布">
                    <input type="button" id="clear" @click="clear" value="清空">
                </div>
            </div>
            <div class="content" ref="markdownContent" contenteditable="true" @keyup="convert"></div>
        </div>
        <div class="textarea html">
            <div class="title">
                <span>预览区</span>
            </div>
            <div class="content" ref="htmlContent"></div>
        </div>
    </div>
</template>

<script>
import showdown from 'showdown';
import { Message } from 'element-ui';
// showdown.setOption('tables',true)
var converter = new showdown.Converter({tables:true,tablesHeaderId:true,strikethrough:true,ghCodeBlocks:true,
smoothLivePreview:true,simplifiedAutoLink:true,tasklists:true});
export default {
    name:'WriteBlog',
    methods:{
        //markdown转html
        convert(){
            this.$refs.htmlContent.innerHTML=converter.makeHtml(this.$refs.markdownContent.innerText);
        },
        //清空博客内容
        clear(){
            this.$refs.htmlContent.innerHTML='';
            this.$refs.markdownContent.innerHTML='';
        },
        //发布
        submit(){
            let title=this.$refs.htmlContent.getElementsByTagName('h1');
            if(title.length==0){
                Message.error({message:"该博客还没有标题哦，赶紧折腾一个吧~~~",showClose:true});
            }
            else{
                let content=this.$refs.htmlContent.innerHTML;
                title=title[0].innerText;
                this.$axios.post('/api/posts/savePost',{
                    'title':title,
                    'content':content,
                })
                .then((res)=>{
                    Message.success({message:"发布成功~~~",showClose:true});
                    this.clear();
                })
            }
            
        }
    }
}
</script>

<style scoped>

.container{
    width:100%;
    height:auto;
}
.textarea{
    /* width:calc(50% - 20px); */
    width:50%;
    height:auto;
    overflow: hidden;
    float: left;
    box-sizing: border-box;
    /* margin:0 5px; */
    padding:0 5px;
}
.textarea .content{
    width:100%;
    height:500px;
    border:1.5px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #ccc;
    box-sizing: border-box;
    overflow: auto;
    margin-top:5px;
    padding: 5px 5px;
}
.title{
    font-size: 1.5rem;
    font-weight: bold;
    height:auto;
    width:100%;
    border:1.5px solid #ccc;
    border-radius: 5px;
    padding:5px;
    box-sizing: border-box;
    position: relative;
}
.btnBox{
    width:auto;
    height:100%;
    float:right;
}
.btnBox>input{
    height:100%;
    float: right;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
}
.btnBox>input:active{
    background:#ccc;
}
/* .el-button{
    position: absolute;
    top:5px;
    right:0;
    float:right;
    height:calc(100% - 10px);
    line-height: 1;
} */
</style>

<style>
.html .content table {
  border:1px solid #ccc;
}
.html .content td,
tr,th {
  padding: 0;
  border:1px solid #ccc;
  text-align: center;
}
</style>

